<template>
<div id="me">
  <div class="avatarcontent">
    <img class="avatar" :src="$store.state.user.avatar?$store.state.user.avatar:avatar" alt="">
    <span class="nickname">{{$store.state.user.username?$store.state.user.username:'未知姓名'}}</span>
  </div>
  <van-cell-group>
  
  <van-cell  icon="contact" is-link @click="myMobile">
    <template slot="title">
      <span class="van-cell-text">我的手机号</span>
      <van-tag :type="$store.state.user.mobile?'success':'danger'" >{{$store.state.user.mobile?$store.state.user.mobile:'未设置手机'}}</van-tag>
    </template>
  </van-cell>
  <van-cell  icon="contact" is-link @click="setPassShow=true">
    <template slot="title">
      <span class="van-cell-text">{{$store.state.user.password?'修改':'设置'}}网页密码</span>
      <!-- <van-tag type="danger" v-if="!$store.state.user.password">未设置密码</van-tag> -->
    </template>
  </van-cell>
  <van-cell  icon="contact" is-link @click="myCollection" v-if="$store.state.user.role == 1">
    <template slot="title">
      <span class="van-cell-text">我的收藏</span>
    </template>
  </van-cell>
  <van-cell  icon="chat" is-link v-on:click="aboutUs"> 
    <template slot="title">
      <span class="van-cell-text" >关于我们</span>
    </template>
  </van-cell>
</van-cell-group>
<van-dialog
  v-model="dialogShow"
  title="关于我们"
>
  <p  style="font-size:14px;padding: 0 10px">
    "世有伯乐，然后有千里马。千里马常有，而伯乐不常有。”<br>
    超级伯乐，分享您的千里马，成人达己，享猎就猎！<br>
    说明：<br>
    1）我们会对您个人的情况严格保密，您还可以使用昵称来参与讨论。<br>
    2）您推荐或上传的人才信息可以设定保密或共享（共享的需经人才同意），所有人才，我们的猎头顾问会直接电话和他们沟通，除非经过您授权，不会透漏您是间接的伯乐。而且我们的平台目前不对人才端开放，不涉及隐私问题。

  </p>
</van-dialog>
<van-dialog
  v-model="setMobileShow"
  show-cancel-button
  @confirm="comfirmMobile"
>
  <van-field
    v-model="mobile"
    label="手机号"
    placeholder="请输入手机号"
  />
</van-dialog>
<van-dialog
  v-model="setPassShow"
  show-cancel-button
  @confirm="comfirmPass"
  :before-close="beforePassCLose"
>
  <van-field
    v-model="passwd"
    label="新密码"
    type="password"
    placeholder="请输入新的密码"
  />
  <van-field
    type="password"
    v-model="passwdcf"
    label="确认密码"
    placeholder="请确认您的密码"
  />
</van-dialog>
</div>
</template>

<script>
import Config from './project.config'
export default {
  data: function() {
    return {
      mobile: '',
      passwd: '',
      passwdcf: '',

      setPassShow:false,
      setMobileShow: false,
      dialogShow: false,
      avatar:
        "https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=问号&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&cs=253057970,2942877212&os=1151053423,729324726&simid=4094652280,722316602&pn=52&rn=1&di=58013361230&ln=1534&fr=&fmq=1534680076516_R&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=http%3A%2F%2Fthumbs.dreamstime.com%2Fz%2F%25E7%259C%258B%25E9%2597%25AE%25E5%258F%25B7%25E7%259A%2584%25E5%2595%2586%25E4%25BA%25BA-47707565.jpg&rpstart=0&rpnum=0&adpicid=0"
    };
  },
  methods: {
    myCollection(){
      console.log('To Collection');
      this.$router.push({
        name: 'mycollection',
      })
    },
    beforePassCLose(str,done){
      if(str == 'confirm'){
        this.comfirmPass(done)
      }else{
        this.passwd = '';
        this.passwdcf = '';
        done()
      }
    },
    myMobile(){
      console.log(this.$refs)
      if(this.$store.state.user.mobile){
        console.log('already have mobile')
        return
      }
      this.setMobileShow = true

    },
    comfirmPass(done){
      if(this.passwd==''||this.passwdcf == ''){this.$toast('请输入密码！');done(false);return}
      if(this.passwd!= this.passwdcf){this.$toast('密码和确认密码不相同');done(false);return}
      if(this.passwd.length<6){this.$toast('密码不能少于五个字符');done(false);return}
      this.$http.post(Config.baseUrl + '/api/user/password/' + this.passwd).then(function(rsp){
        this.$toast(rsp.data.message);
        this.$store.state.user.password = this.passwd;
      },function(){
        this.$toast('修改密码失败，未知错误')
      })

      this.passwd = '';
      this.passwdcf = '';
      done();

    },
    comfirmMobile(){

    },
    aboutUs(){
      console.log('click about us')
      this.dialogShow = true
    },
    hideTab: function() {
      this.$store.commit("hideTab");
    },
    showTab: function() {
      this.$store.commit("showTab");
    }
  },
  mounted() {
    console.log(this.$store.state)
  },
};
</script>

<style lang="stylus" scoped>
.avatarcontent {
  height: 150px;
  background: url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2988649858,3285937478&fm=27&gp=0.jpg');
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.avatar {
  height: 60px;
  width: 60px;
  border-radius: 100%;
  margin-left: auto;
  margin-right: auto;
  // margin-top -20px
}

.nickname {
  // position absolute
  text-align: center;
  height: 20px;
  width: 100%;
  font-weight: 400px;
  margin-top: 8px;
  color: #333333;
}
</style>

